<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/schooledin.css" type="text/css" />
<link rel="stylesheet" href="css/profile.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<title>SchooledIn</title>
</head>

<%
String sid = request.getParameter("sid");
String tab = (String)request.getAttribute("page");
String name = (String)session.getAttribute("name");
if( tab == null )
    tab = "";
%>

<script>

$(document).ready(function() {
	$(".profile-links li").mouseenter(function () {
		var menu = $(this).attr("title");
		$("#"+menu).slideDown();
	});
	$(".profile-links li").mouseleave(function () {
        var menu = $(this).attr("title");
        $("#"+menu).slideUp();
    });
});

function toggleLogout() {
	$("#logout").slideToggle();	
}
</script>

<body> 
<div class="banner">
  <img class="logo" src="images/schooledinlogo.png"/>
  <div class="welcome" onclick="toggleLogout()"><%=name %></div>
  <div id="logout"><a href="Logout.jsp">Logout</a></div>
</div>
<div class="profile-navigation">
  <ul class="profile-links">    
  
    <!--  About Me Menu -->
    <li title="about-menu"><a <%=tab.equals("profile") ? "style='color:#336699'" : "" %> href="Profile.jsp">About Me</a>
      <ul id="about-menu" class="dropdown">
        <li><a href="Profile.jsp?sid=<%=sid%>">My Profile</a></li>
        <li><a href="#">My Academic Profile</a></li>
      </ul>
    </li>     
    
    <!--  My Connections -->
    <li title="myconnections-menu"><a <%=tab.equals("myconnections") ? "style='color:#336699'" : "" %>href="#">My Connections</a>
      <ul id="myconnections-menu" class="dropdown">
        <li><a href="#">Classmates</a></li>
        <li><a href="#">Teachers</a></li>
        <li><a href="#">Friends</a></li>
      </ul>
    </li>
     
    <!--  My Records -->
    <li title="myrecords-menu"><a <%=tab.equals("myrecords") ? "style='color:#336699'" : "" %>href="#">My Records</a>
      <ul id="myrecords-menu" class="dropdown">
        <li><a href="#">My Dreamlist</a></li>
        <li><a href="#">Transcripts</a></li>
        <li><a href="#">Recommendations</a></li>
        <li><a href="#">Applications</a></li>
      </ul>
    </li>
    
    <!--  My Inbox -->
    <li title="myinbox-menu"><a <%=tab.equals("myinbox") ? "style='color:#336699'" : "" %>href="#">My Inbox</a>
      <ul id="myinbox-menu" class="dropdown">
        <li><a href="#">Inbox</a></li>
        <li><a href="#">Sent</a></li>
        <li><a href="#">Trash</a></li>
      </ul>
    </li>
    
  </ul>
</div>